<!DOCTYPE html>
{% load static %}
<html>
<head>
    <meta charset="utf-8">
    <title>
        文章类型添加
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href={% static 'css/font.css' %}>
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <script src="{% static 'lib/layui/layui.js' %}" charset="utf-8"></script>
    <script type="text/javascript" src="{% static 'js/index.js' %}"></script>

    {#    <script href="{% static 'js/jquery.min.js' %}"></script>#}
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <!-- 引入 jQuery UI 用于拖拽 -->
    {#    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>#}

    <style>
        .file-upload {
            display: inline-block; /* 块元素转换为行内元素 */
            position: relative; /* 父元素使用相对定位, 方便子元素进行绝对定位 */
            width: 80px; /* 设置元素宽度, 子元素要保持一致 */
            height: 30px; /* 设置元素高度,子元素要保持一致 */
            line-height: 30px; /* 保证label标签内容垂直居中 */
            text-align: center; /* 保证label标签内容水平居中 */
            border-radius: 4px; /* 圆角样式 */
            color: skyblue; /* 字体颜色 */
            border: 1px solid deepskyblue; /* 边框 */
            cursor: pointer;
        }

        .file-upload input {
            position: absolute; /* 子元素绝对定位 */
            top: 0;
            left: 0;
            width: 80px;
            height: 30px;
            opacity: 0; /* 设置透明 */
        }


        .uploaded-image {
            max-width: 100px;
            max-height: 100px;
            margin: 10px;
            cursor: pointer;
            border-radius: 50%; /* 圆角 */
            border: 2px solid #ddd; /* 边框 */
            overflow: hidden; /* 隐藏边框外的部分 */
        }


        .delete-icon {
            position: absolute;
            top: 0;
            right: 0;
            background-color: red;
            color: white;
            padding: 5px;
            cursor: pointer;
        }


        .imgContainer img {
            max-width: 80%; /* 设置最大宽度为父容器的宽度 */
            max-height: 80%; /* 设置最大高度为父容器的高度 */
        {#width: 200px;#}{#height: 200px;#}{#margin: 10px;#}
        }

        /* 每张图片的X删除按钮  通过定位来实现 */

        .imgContainer div {
            position: relative;
            display: inline-block;
        {#flex: 0 0 23%; /* 设置图片容器的宽度百分比，留有间隙 */#}{#margin-bottom: 10px; /* 设置图片容器之间的下边距 */#}
        }


        .imgContainer span {
            position: absolute;
            top: 5px;
            right: 24px;
            background-color: #f00; /* 可选：设置背景颜色 */
            color: #fff; /* 可选：设置文字颜色 */
            padding: 5px; /* 可选：设置内边距 */
            cursor: pointer;
        }

        #imageModal {
            margin-top: 90px;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
            overflow: auto; /* 允许模态框内滚动 */
            text-align: center; /* 居中文本 */
            vertical-align: middle; /* 垂直居中 */
        }

        #modalContent {
            width: 80%;
            max-width: 1200px; /* 设置模态框最大宽度 */
        }

        #modalImage {
            width: 74%;
            height: 60%;
            max-height: 80%; /* 限制图片最大高度 */
            object-fit: contain;
        }

        /* Reset default radio button styles */
        input[type="radio"] {
            margin-left: 20px;
            margin-top: 10px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border: 2px solid black;
            border-radius: 50%;
            outline: none;
            cursor: pointer;
        }

        /* Style the checked radio button */
        input[type="radio"]:checked {
            background-color: #3498db;
            border-color: #3498db;
        }

        .image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .img {
            position: relative;
            width: 200px; /* 设置宽度为百分之百，自适应宽度 */
            height: 200px; /* 保持高度不变 */
            color: #fff; /* 可选：设置文字颜色 */
            padding: 5px; /* 可选：设置内边距 */
            box-sizing: border-box; /* 可选：保持宽度包含内边距和边框 */
            margin-bottom: 10px; /* 设置图像之间的垂直间距 */
        }

        .img img {
            width: 100%;
            height: 100%
        }

        .video-container {
            display: block;
            width: 100%;
        }

        .video {

            width: 300px; /* 设置宽度为百分之百，自适应宽度 */
            height: 200px; /* 保持高度不变 */
            color: #fff; /* 可选：设置文字颜色 */
            padding: 5px; /* 可选：设置内边距 */
            box-sizing: border-box; /* 可选：保持宽度包含内边距和边框 */
        }

        .video-container {
            display: block;
        }
    </style>
</head>
<body>

<div class="layui-card">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">

                <form novalidate method="post" class="layui-form-pane" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>用户名
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="username" autocomplete="off"
                                   placeholder="请输入"
                                   class="layui-input" id="username" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>密码
                        </label>
                        <div class="layui-input-block">
                            <input type="password" name="password" autocomplete="off"
                                   placeholder="请输入"
                                   class="layui-input" id="password" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>确认密码
                        </label>
                        <div class="layui-input-block">
                            <input type="password" name="re_password" autocomplete="off"
                                   placeholder="请输入"
                                   class="layui-input" id="re_password" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button type="button" class="layui-btn sub_file">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


</body>

<script>
    $('.sub_file').click(function () {

        var formData = new FormData();
        // 添加其他数据到 FormData
        formData.append('username', $('#username').val());
        formData.append('password', $('#password').val());
        formData.append('re_password', $('#re_password').val());

        $.ajax({
            url: '/user/add/',  // 替换为你的服务器端上传端点
            type: 'POST',
            data: formData,
            async: true, // 设置为异步请求
            processData: false,
            contentType: false,
            success: function (response) {
                if (response.code === '200') {
                    console.log('添加成功:', response);
                    layer.msg('添加成功', {icon: 1});
                    setTimeout(function () {
                        parent.layer.closeAll();
                        parent.location.reload(); // 刷新父页面
                    }, 2000);
                } else {
                    layer.msg('添加失败', {icon: 5});
                }
            },
            error: function (error) {
                console.error('添加失败:', error);
                layer.msg('添加失败', {icon: 5});
            }
        });


    });


</script>

<script>

</script>
</html>

